<template>
<!-- 更多屏道弹窗 -->
  <div class="nav-more">
      <van-action-sheet v-model="show" @close='close'>
        <div class="content">
            <div class="header-box">
               <i @click="close" class="iconfont iconmjiantou-copy"></i>
               <span>全部频道</span>
            </div>
            <van-swipe @change="onChange">
                 <van-swipe-item   v-for="(v,w) in navListRes" :key="w"> 
                     <ul class="main">
                        <li class="main-item" v-for="(item,i) in v" :key="i" @click="myItem(item)">
                            <img :src="item.icon" alt="">
                            <p>{{item.title}}</p>
                        </li>       
                     </ul>
             </van-swipe-item>
            </van-swipe>
           
            
        </div>
        </van-action-sheet>
        </div>
</template>
<script>

export default {
  props: {
      show:{
          type:Boolean,
          default:true
      },
      navList:{
          type:Array,
          default:[]
      },
  },
  data() {
    return {
        navListRes:[]
    };
  },
  mounted: function() {	
  },
  methods: {
      myItem(data){
         this.$emit("navCom", {type:'active',data,info:'当前选中tab'});
         this.$emit("navCom", {type:'close',info:'关闭更多频道页'});
      },
      close(){
          this.$emit("navCom", {type:'close',info:'关闭更多频道页'});
      },
      //每num个分为一组
      getListRes(array,num){
            let newArr = []
            for (var i = 0; i < array.length; i += num) {
	           newArr.push(array.slice(i, i + num))
             }
             return newArr
      },
  },
  watch:{
      navList(val){
       this.navListRes = this.getListRes(val,6);
      }
  }
};
</script>
<style scoped>
.nav-more /deep/ .van-overlay{
    background: rgba(0, 0, 0, 0.4);
}
 .content {
     width: 100vw;
     padding-top: 44px;
     padding-left: 36px;
     padding-right: 36px;
     margin-bottom: 75px;
    /* padding: 16px 16px 160px; */
  }
  .header-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
  }
  .header-box i{
      font-size: 28px;
      color: #333333;
      font-weight: 900;
  }

  .header-box span{
      font-size: 36px;
      font-weight: 500;
      color: #333333;
  }
  .header-box::after{
      content: '';
      width: 28px;

  }
  .main-item img{
      height: 88px;
      width: 88px;
      margin-bottom: 15px;
  }
  .main{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-bottom: 60px;
      /* padding:0 111px; */
  }
   .main-item{
       width: calc((100vw - 76px) / 3);
       margin-top: 60px;
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   .main-item p{
       text-align: center;
       font-size: 28px;
       color: #27344B;
       line-height: 30px;
       letter-spacing: 1px;
   }
  .content /deep/ .van-swipe__indicator{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #000000;
    opacity: 0.1;
   }
   .content /deep/ .van-swipe__indicator--active{
    background: #7C7C7C;
    opacity: 0.6;
   }
</style>

